<template>
	<!-- 搜索栏 start -->
	<el-row>
		<el-col :span="5">
			<div class="grid-content ep-bg-purple-dark">
				<el-input v-model.trim="kw" placeholder="请输入姓名或身份证号" class="w-100 m-2" />
			</div>
		</el-col>
		<el-col :span="1">
		</el-col>
		<el-col :span="4" class="m-2">
			<el-button type="primary" @click="loadData(1)">查询</el-button>
		</el-col>
		<el-col :span="10">
		</el-col>
	</el-row>
	<div style="margin-top: 40px;"></div>
	<!-- 搜索栏 end -->
	<!-- 表格栏 start -->
	<el-row class="m-2">
		<el-col :span="24">
			<el-table :data="data.records" style="width:100%;" v-loading="loading">
				<el-table-column fixed prop="id" label="序号" align="center" width="80" />
				<el-table-column prop="realName" label="姓名" align="center" />
				<el-table-column prop="gender" label="性别" align="center" :formatter="formatGender" />
				<el-table-column prop="idnumber" label="身份证号" align="center" />
				<el-table-column prop="birthdate" label="出生日期" align="center" />
				<el-table-column prop="phone" label="手机" align="center" />
				<el-table-column prop="createdate" label="注册日期" align="center" />
				<el-table-column prop="channelName" label="注册渠道" align="center" />
			</el-table>
		</el-col>
	</el-row>

	<!-- 表格栏 end -->
	<div style="margin-top: 20px;"></div>

	<el-row>
		<!-- <el-pagination
		background layout="prev, pager, next"
		:total="1000" :page-count="10"></el-pagination> -->

		<el-col :span="20">
			<el-pagination background layout="prev, pager, next" :total="1" :page-count="data.pages"
				@current-change="handleCurrentChange" />
		</el-col>
		<el-col :span="4">
			<el-select v-model="ps" class="w-20 m-2" placeholder="每页行数" @change="loadData(1)">
				<el-option v-for="item in pageSizes" :key="item" :label="item" :value="item" />
			</el-select>
		</el-col>
	</el-row>
	<!-- page start -->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { fetchData, postReq } from '../../utils/api'
import router from '../../router';
import { formatGender } from '../../utils/utils'

//data start
const loading = ref(false)
const data = ref({
	records: []
})
//搜索框
const kw = ref('')
//每页行数
const ps = ref(10)
const pageSizes = [10, 20, 30, 50]

//表单对象
const editform = ref({
	"id": 0,
	"realName": "",
	"gender": "",
	"idnumber": "",
	"birthdate": "",
	"phone": "",
	"createDate": "",
	"channel": "",
	"delMark": 1
});

onMounted(async () => {
	loadData(1)
});

//加载数据
async function loadData(pn) {
	loading.value = true;
	let url = `/customer/page?count=${ps.value}&pn=${pn}`;

	if (kw !== '') {
		url += `&keyword=${kw.value}`;
	}
	try {
		const result = await fetchData(url, null);
		if (result.result) {
			data.value = result.data
			// if (data.value.records.gender === 71){
			// 	data.value.records.gender="男"
			// }else if (data.value.records.gender ===72){
			// 	data.value.records.gender="女"
			// }
			console.log(data.value)

			loading.value = false
		} else {
			if (result.errMsg == '未登录')
				router.push('/login')
		}
	} catch (error) {
		console.error("Error fetching data:", error);
	}
}

//分页
function handleCurrentChange(number) {
	loadData(number)
}

</script>

<style></style>